<template>
	<view class="left-back">
		<!-- 		v-if="role == 0"
 -->
		<view class="topview-back" v-if="role == 0">
			<uni-swiper-dot :info="bannerArr" :current="current" field="content" :mode="mode" :dotsStyles="dotStyle">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in bannerArr" :key="index">
						<view class="swiper-item" @click="clickBannerAction(item)">
							<image class="swiper-image" mode="aspectFill" :src="item.picUrls"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="consult-btn" @click="clickConsultAction">发起咨询</view>
			<view class="consult-btn serve-btn" @click="clickBuyAction">购买服务</view>
		</view>
		<view class="select-back">
			<view v-for="(item,index) in listArr" :key="index"
				:class="[selectRow == index ? 'slot-box slot-box1':'slot-box']" @click="clicklistAction(index)">
				<image mode="aspectFit" class="cell-image" :src="item.src"></image>
				<view class="cell-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<consultEdit v-if="showConsultEdit" @consultClose='consultClose'></consultEdit>
		<goodsDetail v-if="showDetail" :selectID='selectID' @goodDeatilClose='goodDeatilClose'></goodsDetail>
		<contact v-if="showContact" :selectID='selectID' :editType='editType' @smallPageClose='clickSmallPageClose'>
		</contact>

	</view>
</template>

<script>
	import consultEdit from "@/packageC/PhonePC/consult/consultEdit.vue"
	import goodsDetail from "@/packageC/PhonePC/buyServe/goodsDetail.vue"
	import contact from "@/packageC/PhonePC/info/contact.vue"

	let app = ''

	export default {
		name: 'leftSelect',

		components: {
			consultEdit,
			goodsDetail,
			contact
		},
		data() {
			return {
				role: '',
				roleUrl: '',
				selectRow: 0,
				"listArr": [{
					"name": '案件列表',
					"src": '../../../static/pc_tabbar_case.png'
				}, {
					"name": '案件处理',
					"src": '../../../static/pc_tabbar_manage.png'
				}, {
					"name": '文件列表',
					"src": '../../../static/pc_tabbar_file.png'
				}, {
					"name": '工作时长',
					"src": '../../../static/pc_tabbar_time.png'
				}, {
					"name": '客户管理',
					"src": '../../../static/pc_tabbar_client.png'
				}, {
					"name": '工作组',
					"src": '../../../static/pc_tabbar_team.png'
				}, {
					"name": '冲突查询',
					"src": '../../../static/pc_tabbar_confilct.png'
				}, ],
				dotStyle: {
					backgroundColor: 'rgba(255, 255, 255,0.5)',
					border: '1px rgba(255, 255, 255,0.5) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255,1.0)',
					selectedBorder: '1px rgba(255, 255, 255,1.0) solid'
				},
				showConsultEdit: false,
				current: 0,
				mode: 'dot',
				bannerArr: [], //广告
				showDetail: false, //显示商品详情
				selectID: '',
				showContact: false, //微页面
				editType: ''
			}
		},

		mounted() {
			app = getApp()
			var _this = this
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			console.log('吃' + _this.role)
			if (_this.role == '0') {
				this.requestBannerData()
				this.listArr = [{
					"name": '案件列表',
					"src": '../../../static/pc_tabbar_case.png'
				}]
			}
		},
		methods: {
			//网络请求示例
			async requestBannerData() {
				let _this = this
				let parmas = {
					size: 1000,
					status: '1'
				};


				console.log(parmas)
				const res = await this.$myRequest({
					url: "/client/advert/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						item.picUrls = _this.$imageUrls({
							picUrls: item.picUrls,
							height: 200,
						})
						arr.push(item)
						console.log(item.picUrls)
					}
					_this.bannerArr = arr
				}
			},
			//点击广告
			clickBannerAction(item) {
				console.log(item)
				if(!getApp().globalData.isPhone){
					uni.showModal({
						title:'提示',
						content:'请先绑定手机号',
						showCancel:false,
					})
					return
				}
				if (item.targetType.code == '1') { //商品列表
					this.$emit('clickBuyAction', {})
				} else if (item.targetType.code == '2') { //商品详情
					this.selectID = item.targetUrl
					this.showDetail = true;
				} else if (item.targetType.code == '3') { //微页面
					this.selectID = item.targetUrl
					this.editType = 'smallPage'
					this.showContact = true
				}
			},
			//发起咨询	
			clickConsultAction() {
				if(!getApp().globalData.isPhone){
					uni.showModal({
						title:'提示',
						content:'请先绑定手机号',
						showCancel:false,
					})
					return
				}
				this.customerRights_check()
				//this.showConsultEdit = true
			},

			//购买服务
			clickBuyAction() {
				if(!getApp().globalData.isPhone){
					uni.showModal({
						title:'提示',
						content:'请先绑定手机号',
						showCancel:false,
					})
					return
				}
				this.$emit('clickBuyAction', {})
			},

			//查询剩余次数
			async customerRights_check() {
				let _this = this
				uni.showLoading({
					title: '正在查询...'
				})
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/case/check`,
				})
				uni.hideLoading()
				console.log('查询次数', res)
				if (res.data.code == 200) {
					let list = res.data.data

					let size = list.length
					if (size === 0) {
						uni.showModal({
							title: '提示',
							content: '未查询到当前有可咨询的次数，请先购买咨询服务吧~',
							success: (res) => {
								if (res.confirm) {
									this.$emit('clickBuyAction', {})
								}
							}
						})
					} else {
						_this.showConsultEdit = true
					}
				}
			},

			goodDeatilClose() {
				this.showDetail = false;
			},

			consultClose() {
				this.showConsultEdit = false
			},

			clickSmallPageClose() {
				this.showContact = false
			},

			clicklistAction(index) {
				if(!getApp().globalData.isPhone){
					uni.showModal({
						title:'提示',
						content:'请先绑定手机号',
						showCancel:false,
					})
					return
				}
				this.selectRow = index;
				console.log(this.selectRow)
				this.$emit('clickleftAction', {
					'selectRow': this.selectRow,

				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-left: 20px;
	}

	.uni-list-item__container {
		background-color: red;
	}

	.cell-image {
		width: 20px;
		height: 20px;
		margin-right: 7px;
	}

	.cell-name {
		min-width: 60px;
	}

	.slot-box {
		cursor: pointer;
		font-size: 14px;
		color: #666;
		background-color: white;
		width: auto;
		margin-left: 16px;
		margin-right: 16px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.slot-box1 {
		color: #333;
		background-color: #F3F5F7;
		font-weight: bolder;
	}

	.left-back {
		display: flex;
		flex-direction: column;
	}

	.topview-back {
		width: 100%;

		width: auto;
		margin-left: 16px;
		margin-right: 16px;
	}

	.swiper-box {
		height: 80px;
		margin-top: 16px;
		border-radius: 4px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80px;
		color: #fff;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.consult-btn {
		width: 100%;
		height: 40px;
		background: #8ED8E9;
		border-radius: 2px;
		color: white;
		margin-top: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.serve-btn {

		border: 1px solid #EEEEEE;
		background-color: white;
		color: #333;
	}

	.select-back {
		margin-top: 30px;
	}
</style>
